<template>

	<div class="digitalFlot" id="digitalFlot" :style="font">

		<div class="digitaitile" id="digitaitile" :title="chartTititle" :style="title_posXY">{{chartTititle}}</div>

		<div class="runNum" :style="flop" :title="floptitle" :id="getDtae.vc_ascode+'Digital'"></div>



	</div>

</template>

<script>

	export default {

		data() {

			return {

				value: '',

				suffixValu: '',

				font: '',

				floptitle: '',

				titleStyle: '',

				slecPos: '',

				slecPosOnOFF: false,

				/*标题在上在左的条件*/

				title_posXY: '',

				flop: '',

				qianzhui: '',

				fbqStyle: '', //翻牌器的样式

				slectPosminmax: '',

				Suffix: '',

				subjectIndex: '',

				code: "",

				vc_name: '',

				//      numarr: [],

				chartTititle: 'Digitizer',

				num_span: '',

				fpqValue: '',

				styles: [], // add by terry 20171111 样式集合.

				// add by terry 20171104 默认数据.

				datastyle: {

				

				}

			}

		},

		props: ['getStyle', 'subjectIndex', 'Jobj', 'getDtae', 'code', "thisFaBu"],

		methods: {

			//add by clover 11-24 初始化数据方法和滚动特效方法

			numberAnimate(setting) {





				//如果对象有多个，提示出错

				if($('#' + this.getDtae.vc_ascode + 'Digital').length > 1) {

					return;

				}



				//如果未设置初始化值。提示出错

				if(setting.num == "") {

					return;

				}



				var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\

            <span class="mt-number-animate-span">0</span>\

            <span class="mt-number-animate-span">1</span>\

            <span class="mt-number-animate-span">2</span>\

            <span class="mt-number-animate-span">3</span>\

            <span class="mt-number-animate-span">4</span>\

            <span class="mt-number-animate-span">5</span>\

            <span class="mt-number-animate-span">6</span>\

            <span class="mt-number-animate-span">7</span>\

            <span class="mt-number-animate-span">8</span>\

            <span class="mt-number-animate-span">9</span>\

            <span class="mt-number-animate-span">.</span>\

          </div>';

				//初始化

				$('#' + this.getDtae.vc_ascode + 'Digital').html(this.setNumDom(this.numToArr(setting.num), nHtml));

				var htmlObjects = $('#' + this.getDtae.vc_ascode + 'Digital');

				this.runAnimate(htmlObjects);

				var htmlObjects = $('#' + this.getDtae.vc_ascode + 'Digital');

				return htmlObjects;

			},

			//执行动画

			runAnimate($parent, setting) {

				var thatObject = this;

				$parent.find(".mt-number-animate-dom").each(function() {

					var num = $(this).attr("data-num");

					num = (num == "." ? 10 : num);

					var spanHei = $(this).height() / 11;

					var thisTop = -num * spanHei + "px";

					if(thisTop != $(this).css("top")) {

						//							if(true) {

						//HTML5不支持

						if(!window.applicationCache) {

							$(this).animate({

								top: thisTop

							}, 100); //setting.speed

						} else {

							$(this).css({

								'transform': 'translateY(' + thisTop + ')',

								'-ms-transform': 'translateY(' + thisTop + ')',

								/* IE 9 */

								'-moz-transform': 'translateY(' + thisTop + ')',

								/* Firefox */

								'-webkit-transform': 'translateY(' + thisTop + ')',

								/* Safari 和 Chrome */

								'-o-transform': 'translateY(' + thisTop + ')',

								'-ms-transition': 1 + 's',

								'-moz-transition': 1 + 's',

								'-webkit-transition': 1 + 's',

								'-o-transition': 1 + 's',

								'transition': 1 + 's'

							});

						}

					}

				});

			},

			//设置DOM symbol:分割符号

			setNumDom(arrStr, nHtml) {

				var shtml = '<div class="mt-number-animate">';

				for(var i = 0, len = arrStr.length; i < len; i++) {

					if(i != 0 && (len - i) % 3 == 0 && arrStr[i] != ".") {

						shtml += '<div class="mt-number-animate-dot">' + ',' + '</div>' + nHtml.replace("{{num}}", arrStr[i]);

					} else {

						shtml += nHtml.replace("{{num}}", arrStr[i]);

					}

				}

				shtml += '</div>';

				return shtml;

			},

			//数字处理

			numToArr(num) {

				num = parseFloat(num).toFixed(0);

				if(typeof(num) == 'number') {

					var arrStr = num.toString().split("");

				} else {

					var arrStr = num.split("");

				}

				return arrStr;

			},

			resetData(num, setting) {

				var newArr = this.numToArr(num);

				var thatObject = this;

				var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\

            <span class="mt-number-animate-span">0</span>\

            <span class="mt-number-animate-span">1</span>\

            <span class="mt-number-animate-span">2</span>\

            <span class="mt-number-animate-span">3</span>\

            <span class="mt-number-animate-span">4</span>\

            <span class="mt-number-animate-span">5</span>\

            <span class="mt-number-animate-span">6</span>\

            <span class="mt-number-animate-span">7</span>\

            <span class="mt-number-animate-span">8</span>\

            <span class="mt-number-animate-span">9</span>\

            <span class="mt-number-animate-span">.</span>\

          </div>';

				var $dom = $('#' + thatObject.getDtae.vc_ascode + 'Digital').find(".mt-number-animate-dom");

				if($dom.length < newArr.length) {

					$('#' + this.getDtae.vc_ascode + 'Digital').html(this.setNumDom(this.numToArr(num), nHtml));

				} else {

					$dom.each(function(index, el) {

						$(this).attr("data-num", newArr[index]);

					});

				}

				this.runAnimate($('#' + thatObject.getDtae.vc_ascode + 'Digital'));

			},

			setJson() {

				// 将对象传出.modify by terry

				this.$emit('setJsons', this)

				//初始化

				var nums = this.getNum();

				this.numberAnimate({

					speed: 3000,

					num: nums,

					iniAnimate: true,

					symbol: ',',

					dot: 0

				});

			},

			setControls() {

				// 将对象传出.modify by terry

				this.$emit('setControl', this)

			},

			// add by terry 1110 通知改变/.

			notifyChange(v) {

				var that = this

				if(this.getDtae.hasOwnProperty('layers')) {

					this.datastyle = this.getDtae

				}



				//获取翻牌器数字内容(并将其拆封为数组循环渲染到页面)

				// add by davi 20171119

				var fenge = "";



				if(v == 1) {

					//正常默认渲染

					this.floptitle = this.getNum();

				} else {

					//通信成功直接渲染

					if(v != "null") {

						fenge = this.datastyle.data.parameter[0].name;

						fenge = JSON.parse(v)[fenge].toString();

						this.floptitle = fenge

					}

				}

				this.numSplit(fenge)



				// 全局和标题样式

				this.styles = []

				this.styles.push('postion:absolute;')



				if(this.findValueById("qj_plfs") == 'Headings in the left') {

					this.styles.push('postion:absolute;')

					this.styles.push('left:0;top:50%;');

					this.flop = 'position:absolute;right:0;top:50%;margin-top:-10px;'

				} else if(this.findValueById("qj_plfs") == 'Headings in the right') {

					this.styles.push('postion:absolute;')

					this.styles.push('right:0;top:50%;');

					this.flop = 'position:absolute;left:0;top:50%;margin-top:-10px;'

				} else if(this.findValueById("qj_plfs") == 'Headings in the top') {

					this.styles.push('postion:absolute;')

					this.styles.push('left:0;top:0%;');

					this.flop = 'position:absolute;left:0;top:409%;margin-top:-10px;'

				} else if(this.findValueById("qj_plfs") == 'Headings in the bottom') {

					this.styles.push('postion:absolute;')

					this.styles.push('left:0;top:50%;');

					this.styles.push('margin-top:-10px;');

					this.flop = 'position:absolute;left:0;top:-409%;margin-top:20px;'

				}

				this.styles.push('font-family:' + this.findValueById('bt_wbys_zt') + ';')

				this.styles.push('font-size:' + this.findValueById('bt_wbys_zh') + 'px;')

				this.styles.push('color:' + this.findValueById('bt_wbys_ztys') + ';')

				this.styles.push('font-weight:' + this.findValueById('bt_wbys_ztcx') + ';')

				this.styles.push('letter-spacing:' + this.findValueById('bt_wbys_ztjj') + 'px;')

				this.title_posXY = this.getStyles();



				//翻牌器前缀样式  modify by Jack 取消前缀

				this.chartTititle = this.findValueById('bt_btm')

				//翻牌器数字样式

				this.styles = []

				if(this.findValueById("fpq_szwbys_spdq") == "左对齐") {

					this.styles.push('position:absolute;');

					this.styles.push('right:0;top:50%;');

				} else {

					this.styles.push('position:absolute;');

					this.styles.push('left:0;top:50%;')

				}

				//      this.flop +=this.getStyles();

				this.styles = []

				this.styles.push('color:' + this.findValueById('fpq_szwbys_ztys') + ';')

				this.styles.push('font-size:' + this.findValueById('fpq_szwbys_zh') + 'px;')

				//      this.styles.push('letter-spacing:'+this.findValueById('fpq_szwbys_szjg')+'px;')



				//修改翻牌器数字的样式

				var idname = '#' + this.getDtae.vc_ascode + 'Digital'

				//翻牌器数字

				$(idname).find(".mt-number-animate-span").css({

					color: that.findValueById('fpq_szwbys_ztys'),

					"font-size": this.findValueById('fpq_szwbys_zh'),

				})

				//翻牌器器逗号

				$(idname).find(".mt-number-animate-dot").css({

					color: that.findValueById('fpq_szwbys_ztys'),

					"font-size": this.findValueById('fpq_szwbys_zh'),

				})

				//翻牌器数字的父级边距

				$(idname).find(".mt-number-animate-dom").css({

					"margin-left": this.findValueById('fpq_szwbys_szjg')

				})

				this.flopmw();

			},

			// 获取拼接样式.

			getStyles: function() {

				var styleStr = ''

				for(var v in this.styles) {

					styleStr += this.styles[v]

				}

				return styleStr

			},

			// 根据id获取指定值.

			findValueById: function(v) {



				var tempObj = this.findJsonById(v, this.datastyle)

				// 判断value是对象还是值.

				// 两种情况，value直接是值，或者value下default

				if(tempObj.hasOwnProperty('default')) {

					return tempObj['default']

				}

				// 直接返回.

				return tempObj

			},

			// 根据id获取执行对象.

			findJsonById: function(v, bJson) {

				var layersarr = bJson.layers

				//临时存储样式的值

				var styleValue = ''



				for(var a = 0; a < layersarr.length; a++) {

					//判断获取第一层是否显示

					if(layersarr[a]['id'] == v) {

						layersarr[a]['value'] = value

					}



					for(var b = 0; b < layersarr[a]['child'].length; b++) {

						if(layersarr[a]['child'][b]['id'] == v) {

							styleValue = layersarr[a]['child'][b]['value']

							break

						}

						if(layersarr[a]['child'][b]['child_two'] != 'null') {

							for(var c = 0; c < layersarr[a]['child'][b]['child_two'].length; c++) {

								if(layersarr[a]['child'][b]['child_two'][c]['id'] == v) {

									styleValue = layersarr[a]['child'][b]['child_two'][c]['value']

									break

								}

								if(layersarr[a]['child'][b]['child_two'][c]['child_three'] != 'null' && layersarr[a]['child'][b]['child_two'][c]['child_three'] != undefined) {

									for(var d = 0; d < layersarr[a]['child'][b]['child_two'][c]['child_three'].length; d++) {

										if(layersarr[a]['child'][b]['child_two'][c]['child_three'][d]['id'] == v) {

											styleValue = layersarr[a]['child'][b]['child_two'][c]['child_three'][d]['value']

											break

										}

									}

								}

							}

						}

					}

				}

				return styleValue

			},

			numSplit(num) {

				//    	var num = this.formatCurrency(v).split('')

				//    	this.numarr = num;

				//      update by clover

				this.resetData(num);

			},

			formatCurrency(num) {

				if(num) {

					//将num中的$,去掉，将num变成一个纯粹的数据格式字符串

					num = num.toString().replace(/\$|\,/g, '');

					//如果num不是数字，则将num置0，并返回

					if('' == num || isNaN(num)) {

						return 'Not a Number ! ';

					}

					//如果num是负数，则获取她的符号

					var sign = num.indexOf("-") > 0 ? '-' : '';

					//如果存在小数点，则获取数字的小数部分

					var cents = num.indexOf(".") > 0 ? num.substr(num.indexOf(".")) : '';

					cents = cents.length > 1 ? cents : ''; //注意：这里如果是使用change方法不断的调用，小数是输入不了的

					//获取数字的整数数部分

					num = num.indexOf(".") > 0 ? num.substring(0, (num.indexOf("."))) : num;

					//如果没有小数点，整数部分不能以0开头

					if('' == cents) {

						if(num.length > 1 && '0' == num.substr(0, 1)) {

							return 'Not a Number ! ';

						}

					}

					//如果有小数点，且整数的部分的长度大于1，则整数部分不能以0开头

					else {

						if(num.length > 1 && '0' == num.substr(0, 1)) {

							return 'Not a Number ! ';

						}

					}

					//针对整数部分进行格式化处理，这是此方法的核心，也是稍难理解的一个地方，逆向的来思考或者采用简单的事例来实现就容易多了

					/*

					  也可以这样想象，现在有一串数字字符串在你面前，如果让你给他家千分位的逗号的话，你是怎么来思考和操作的?

					  字符串长度为0/1/2/3时都不用添加

					  字符串长度大于3的时候，从右往左数，有三位字符就加一个逗号，然后继续往前数，直到不到往前数少于三位字符为止

					 */

					for(var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {

						num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));

					}

					//将数据（符号、整数部分、小数部分）整体组合返回

					return(sign + num + cents);

				}



			},

			flopmw() {

				var chilw = $(".digitaitile").width() + $(".runNum").width() / 2;

				$(".digitalFlot").css({

					minWidth: (chilw - 10)

				})

			},

			getNum() {

				//随机生成9位数字字符串，解决所有翻牌器添加时都是一样的问题

				var str = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

				var fpqnum = "";

				for(var i = 0; i < 9; i++) {

					var id = Math.ceil(Math.random() * 9);

					fpqnum += str[id];

				}

				return fpqnum;

			}

		},

		created() {},

		mounted() {

			this.setJson()

			this.setControls()

			this.notifyChange(1)

		}

	}

</script>

<style>

	.gdSpan {

		list-style: none;

		/*width: 40px;*/

		height: 50px;

		float: left;

		position: absolute;

	}

	

	.gdSpan div {

		/*list-style: none;*/

		/*width: 40px;*/

		height: 50px;

		line-height: 50px;

		/*float: left;*/

		/*    position: absolute;*/

	}

	

	.digitalFlot {

		position: absolute;

		width: 100%;

		height: 10%;

		left: 0;

		right: 0;

		top: 0;

		bottom: 0;

		margin: auto;

	}

	

	.digitaitile {

		color: #fff;

		position: absolute;

		cursor: pointer;

	}

	

	.runNum {

		cursor: pointer;

	}

	

	.qianzui {

		font-size: 18px;

		color: yellow;

		transform: translateY(-5px);

	}

	

	.digitalFlot span {

		float: left;

		/*height: 60%;*/

		/*background: -webkit-linear-gradient(top,#0098ff,#2f3d68);*/

		/*line-height: 60%;*/

		font-size: 35px;

		color: #fff600;

		letter-spacing: -4px;

	}

	

	.titlebottom {

		bottom: -180px;

	}

	

	.font_size {

		height: 44px;

		font-size: 30px;

		line-height: 44px;

	}

	

	.mt-number-animate {

		font-family: '微软雅黑';

		line-height: 40px;

		height: 40px;

		/*设置数字显示高度*/

		;

		font-size: 36px;

		/*设置数字大小*/

		overflow: hidden;

		display: inline-block;

		position: relative;

		cursor: pointer;

	}

	

	.mt-number-animate .mt-number-animate-dot {

		width: 15px;

		/*设置分割符宽度*/

		line-height: 40px;

		float: left;

		color: #fff600;

		font-size: 35px;

		text-align: center;

	}

	

	.mt-number-animate .mt-number-animate-dom {

		width: 20px;

		/*设置单个数字宽度*/

		text-align: center;

		float: left;

		position: relative;

		top: 0;

	}

	

	.mt-number-animate .mt-number-animate-dom .mt-number-animate-span {

		width: 100%;

		float: left;

	}

</style>